<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        年:<input id="year" type="text">
        月:<input id="month" type="text">
        日:<input id="day" type="text">
        <button id="btn">点击</button>
        <span id="result"></span>
    </p>
</body>
<script>
    // (1)  输入一个1000-9999的年数, 判断是否是闰年?
    // 普通闰年：公历年份是4的倍数，且不是100的倍数的，为闰年（如2004年、2020年等就是闰年）。
    // 世纪闰年：公历年份是整百数的，必须是400的倍数才是闰年（如1900年不是闰年，2000年是闰年）。

    // (2) 输入年月日, 判断输入的数值是否合法?
    // 年份: 1000-9999 整数
    // 月份: 1-12
    // 日期:  
    //      大月(1 3 5 7 8 10 12)  31
    //      小月(4 6 9 11)  30
    //      2月(平年2月28  闰年2月 29)

    // 先判断年份,在判断月份,判断日期 => 合法日期


    // (3) 输入年月日(假设年月日输入均合法), 判断输入的日期是该年的第多少天?

    // 2023-2-1 =>  31 + 1  
    // 2023-9-6 =>  31 + (28|29) + 31 + 30 + 31 + 30 + 31 + 31 + 6

    // 如果是第n月  => 前n-1个月之和 + 当前月的天数


    // 预习: 
    // 选择结构_switch
    // 循环结构_while do...while  for

    var yearInp = document.getElementById("year");
    var monthInp = document.getElementById("month");
    var dayInp = document.getElementById("day");

    var btn = document.getElementById("btn");
    var resultSpan = document.getElementById("result");

    console.log(yearInp, monthInp, dayInp, btn, resultSpan);

    btn.onclick = function () {
        var year = yearInp.value * 1 ;
        var month = monthInp.value * 1 ;
        var day = dayInp.value * 1;
        console.log(year, month, day);


        if (year >= 1000 && year <= 9999 && year % 1 == 0) {
            console.log("year Ok");
            if (month >= 1 && month <= 12 && month % 1 == 0) {
                console.log("month Ok");

                // 日期: 
                //      大月(1 3 5 7 8 10 12)  31
                //      小月(4 6 9 11)  30
                //      2月(平年2月28  闰年2月 29)


                /* var maxDay = null; // 默认输入月份的最大值 31  (提取公共变量 => 判断赋值)  
                if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
                    maxDay = 31;

                } else if (month == 4 || month == 6 || month == 9 || month == 11) {
                    maxDay = 30;
                } else {  // 2

                    // var febDay = null;
                    // if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                    //     febDay = 29;
                    // }else{
                    //     febDay = 28;
                    // }

                    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                        maxDay = 29;
                    } else {
                        maxDay = 28;
                    }

                } */


                var maxDay = null; 
                switch(month*1){
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        maxDay = 31;
                        break;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        maxDay = 30;
                        break;
                    default:
                        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                            maxDay = 29;
                        } else {
                            maxDay = 28;
                        }
                        break;
                }


                if (day >= 1 && day <= maxDay && day % 1 == 0) {
                    resultSpan.innerText = "√";
                    resultSpan.style.color = "green";
                    resultSpan.style.fontSize = "12px";
                } else {
                    resultSpan.innerText = "请输入1-" + maxDay + "之间的日期";
                    resultSpan.style.color = "red";
                    resultSpan.style.fontSize = "12px";
                }



            } else {
                resultSpan.innerText = "请输入1-12之间的月份";
                resultSpan.style.color = "red";
                resultSpan.style.fontSize = "12px";
            }
        } else {
            resultSpan.innerText = "请输入1000-9999之间的年份";
            resultSpan.style.color = "red";
            resultSpan.style.fontSize = "12px";
        }
    }








</script>

</html>